<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>element</title>
    <link href="/element/css/index.css" rel="stylesheet"/>
    <script src="/element/js/vue.js"></script>
    <script src="/element/js/index.js"></script>
    <script src="/element/js/axios.js"></script>
    <script src="/element/js/app.js"></script>
</head>
<style>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>
<body>
<div id="app">
    <div class="custom-tree-container">
        <div class="block">
            <p>使用 render-content</p>
            <el-tree
                    :data="data"
                    show-checkbox
                    node-key="id"
                    default-expand-all
                    :expand-on-click-node="false"
                    :render-content="renderContent">
            </el-tree>
        </div>
        <div class="block">
            <p>使用 scoped slot</p>
            <el-tree
                    :data="data"
                    show-checkbox
                    node-key="id"
                    default-expand-all
                    :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
                  type="text"
                  size="mini"
                  @click="() => append(data)">
            Append
          </el-button>
          <el-button
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)">
            Delete
          </el-button>
        </span>
      </span>
            </el-tree>
        </div>
    </div>
</div>
<script>
    var Main = {
        data() {
            const data = [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }];
            return {
                data: JSON.parse(JSON.stringify(data)),
                data: JSON.parse(JSON.stringify(data))
            }
        },
        created(){
            // api.GET('/note/page',{'page':1,'size':10,'keyword':this.keyword},(result)=> {
            //     this.tableData=result.data.records;
            //     this.total=result.data.total;
            // })
        },
        methods: {
            append(data) {
                const newChild = { id: id++, label: 'testtest', children: [] };
                if (!data.children) {
                    this.$set(data, 'children', []);
                }
                data.children.push(newChild);
            },

            remove(node, data) {
                const parent = node.parent;
                const children = parent.data.children || parent.data;
                const index = children.findIndex(d => d.id === data.id);
                children.splice(index, 1);
            },
            renderContent(h, { node, data, store }) {
                return (' <span class="custom-tree-node">\n' +
                    '                    <span>{node.label}</span>\n' +
                    '                    <span>\n' +
                    '                    <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>\n' +
                    '                <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>\n' +
                    '                </span>\n' +
                    '                </span>');
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</body>
</html>